<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>打印模板设计器</title>
    <link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
    <link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
    <style>
        /* 设计器样式 */
        .template-design {
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }

        /* 工具栏样式 */
        .design-toolbar {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #f0f2f5;
            border-bottom: 1px solid #e8e8e8;
        }

        /* 设计内容区域 */
        .design-content {
            display: flex;
            flex: 1;
            overflow: hidden;
        }

        /* 左侧组件面板 */
        .component-panel {
            width: 230px;
            border-right: 1px solid #e8e8e8;
            background-color: #fff;
            overflow-y: auto;
        }

        .panel-title {
            padding: 12px 16px;
            font-size: 16px;
            font-weight: 500;
            border-bottom: 1px solid #e8e8e8;
        }

        .component-list {
            padding: 12px;
        }

        .component-item {
            display: flex;
            align-items: center;
            padding: 10px;
            margin-bottom: 8px;
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            cursor: move;
            transition: all 0.3s;
        }

        .component-item:hover {
            background-color: #f5f5f5;
        }

        .item-icon {
            margin-right: 10px;
            font-size: 18px;
        }

        .item-name {
            font-size: 14px;
        }

        /* 中间设计区域 */
        .design-area {
            flex: 1;
            background: #e6e6e6;
            border-radius: 4px;
            overflow: auto;
            position: relative;
        }

        /* 标尺样式 */
        .ruler {
            position: fixed;
            background-color: #f0f0f0;
            z-index: 10;
        }

        .ruler.horizontal {
            margin-left: 20px;
            height: 20px;
        }

        .ruler.vertical {
            margin-top: 20px;
            width: 20px;
        }

        /* 辅助线样式 */
        .guide {
            position: absolute;
            z-index: 20;
            background-color: #1890ff;
        }

        .guide.horizontal {
            left: 0;
            right: 0;
            height: 1px;
            cursor: ns-resize;
        }

        .guide.vertical {
            top: 0;
            bottom: 0;
            width: 1px;
            cursor: ew-resize;
        }

        .guide-value {
            position: absolute;
            background-color: #1890ff;
            color: #fff;
            padding: 2px 6px;
            border-radius: 2px;
            font-size: 12px;
        }

        .guide.horizontal .guide-value {
            top: -20px;
            left: 0;
        }

        .guide.vertical .guide-value {
            left: 0;
            top: 0;
        }

        /* 设计纸张样式 */
        .paper {
            position: relative;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin: 20px;
            transition: transform 0.3s;
            transform-origin: center;
        }

        /* 网格背景 */
        .grid-background {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(to right, rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
            background-size: 10px 10px, /* 小网格 */ 10px 10px, /* 小网格 */ 50px 50px, /* 大网格 */ 50px 50px;
        }

        /* 设计元素样式 */
        .design-element {
            position: absolute;
            cursor: move;
            user-select: none;
        }

        .design-element.active {
            outline: 2px solid #1890ff;
            z-index: 100;
        }

        .design-element.locked {
            cursor: not-allowed;
        }

        /* 缩放手柄 */
        .resize-handles {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .handle {
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: #fff;
            border: 1px solid #1890ff;
        }

        .handle-se {
            right: -4px;
            bottom: -4px;
            cursor: se-resize;
        }

        /* 旋转控件 */
        .rotate-handle {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            background-color: #fff;
            border: 1px solid #1890ff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            color: #1890ff;
        }

        /* 对齐线 */
        .align-line {
            position: absolute;
            background-color: #ff4d4f;
            z-index: 30;
        }

        .align-line.vertical {
            top: 0;
            bottom: 0;
            width: 1px;
        }

        .align-line.horizontal {
            left: 0;
            right: 0;
            height: 1px;
        }

        /* 右键菜单 */
        .context-menu {
            position: fixed;
            background-color: #fff;
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            padding: 4px 0;
        }

        .menu-item {
            padding: 6px 12px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .menu-item:hover {
            background-color: #f5f5f5;
        }

        /* 右侧属性面板 */
        .property-panel {
            width: 300px;
            border-left: 1px solid #e8e8e8;
            background-color: #fff;
            overflow-y: auto;
        }

        .panel-content {
            padding: 12px;
        }

        /* 快捷键提示 */
        .shortcut-tips {
            position: fixed;
            background-color: #fff;
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            padding: 8px;
            z-index: 1000;
        }

        .tip-item {
            display: flex;
            margin-bottom: 4px;
        }

        .tip-item .key {
            background-color: #f5f5f5;
            padding: 2px 6px;
            border-radius: 2px;
            margin-right: 8px;
        }

        /* 变量选择器 */
        .variable-selector {
            padding: 16px;
        }

        .search-box {
            margin-bottom: 16px;
        }

        .variable-list {
            max-height: 400px;
            overflow-y: auto;
        }

        .variable-item {
            padding: 8px 12px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
        }

        .variable-item:hover {
            background-color: #f5f5f5;
        }

        .item-key {
            color: #888;
            font-size: 12px;
        }

        /* 对齐参考线 */
        .snap-line {
            position: absolute;
            background-color: #1890ff;
            z-index: 30;
        }

        .snap-line.horizontal {
            left: 0;
            right: 0;
            height: 1px;
        }

        .snap-line.vertical {
            top: 0;
            bottom: 0;
            width: 1px;
        }

        .snap-line-label {
            position: absolute;
            background-color: #1890ff;
            color: #fff;
            padding: 2px 6px;
            border-radius: 2px;
            font-size: 12px;
        }

        .panel-content .layui-form-item .layui-form-label {
            width: 100%;
            float: left;
            text-align: left;
        }

        .panel-content .layui-form-item .layui-input-block {
            width: 100%;
            float: left;
            margin-left: 0px;
        }
    </style>
</head>

<body>
    <div class="template-design" id="templateDesign">
        <!-- 工具栏 -->
        <div class="design-toolbar">
            <div class="layui-btn-group">
                <button type="button" class="layui-btn layui-btn-sm" id="printSettingsBtn">
                    <i class="layui-icon layui-icon-set"></i> 打印设置
                </button>
                <button type="button" class="layui-btn layui-btn-sm" id="undoBtn" disabled>
                    <i class="layui-icon layui-icon-left"></i> 撤销
                </button>
                <button type="button" class="layui-btn layui-btn-sm" id="redoBtn" disabled>
                    <i class="layui-icon layui-icon-right"></i> 重做
                </button>
                <div class="layui-btn layui-btn-sm layui-btn-primary" id="scaleDisplay">100%</div>
            </div>

            <div class="layui-btn-group" style="margin-left: 10px;">
                <button type="button" class="layui-btn layui-btn-sm" id="alignLeftBtn">
                    <i class="layui-icon layui-icon-align-left"></i>
                </button>
                <button type="button" class="layui-btn layui-btn-sm" id="alignCenterBtn">
                    <i class="layui-icon layui-icon-align-center"></i>
                </button>
                <button type="button" class="layui-btn layui-btn-sm" id="alignRightBtn">
                    <i class="layui-icon layui-icon-align-right"></i>
                </button>
            </div>

            <div class="layui-btn-group" style="right: 10px; position: absolute;">
                <button type="button" class="layui-btn layui-btn-sm" id="previewBtn">
                    <i class="layui-icon layui-icon-survey"></i> 预览
                </button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="saveBtn">
                    <i class="layui-icon layui-icon-save"></i> 保存
                </button>
            </div>
        </div>

        <!-- 设计内容区域 -->
        <div class="design-content">
            <!-- 左侧组件面板 -->
            <div class="component-panel">
                <div class="panel-title">打印组件</div>
                <div class="component-list" id="componentList">
                    <!-- 组件列表将通过JS动态生成 -->
                </div>
            </div>

            <!-- 中间设计区域 -->
            <div class="design-area" id="designArea">
                <!-- 水平标尺 -->
                <div class="ruler horizontal">
                    <canvas id="hRuler" height="20" width="2000"></canvas>
                    <div id="horizontalGuides">
                        <!-- 水平辅助线将通过JS动态生成 -->
                    </div>
                </div>

                <!-- 垂直标尺 -->
                <div class="ruler vertical">
                    <canvas id="vRuler" width="20" height="2000"></canvas>
                    <div id="verticalGuides">
                        <!-- 垂直辅助线将通过JS动态生成 -->
                    </div>
                </div>

                <!-- 组合控制按钮 -->
                <div class="layui-btn-group" id="groupControls"
                    style="position: absolute; top: 30px; left: 30px; display: none; z-index: 100;">
                    <button type="button" class="layui-btn layui-btn-sm" id="groupBtn">
                        <i class="layui-icon layui-icon-group"></i> 组合
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm" id="alignLeftGroupBtn">
                        <i class="layui-icon layui-icon-align-left"></i> 左对齐
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm" id="alignCenterGroupBtn">
                        <i class="layui-icon layui-icon-align-center"></i> 居中对齐
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm" id="alignRightGroupBtn">
                        <i class="layui-icon layui-icon-align-right"></i> 右对齐
                    </button>
                </div>

                <!-- 设计纸张 -->
                <div class="paper" id="paper">
                    <!-- 网格背景 -->
                    <div class="grid-background"></div>

                    <!-- 设计元素将通过JS动态生成 -->
                    <div id="elements"></div>

                    <!-- 对齐线容器 -->
                    <div id="alignLines"></div>
                </div>

                <!-- 右键菜单 -->
                <div class="context-menu" id="contextMenu" style="display: none;">
                    <div class="menu-item" id="copyMenuItem">
                        <i class="layui-icon layui-icon-file"></i> 复制
                    </div>
                    <div class="menu-item" id="lockMenuItem">
                        <i class="layui-icon layui-icon-password"></i> <span id="lockText">锁定</span>
                    </div>
                    <div class="menu-item" id="deleteMenuItem">
                        <i class="layui-icon layui-icon-delete"></i> 删除
                    </div>
                    <div class="menu-item" id="bringToFrontMenuItem">
                        <i class="layui-icon layui-icon-up"></i> 置于顶层
                    </div>
                    <div class="menu-item" id="sendToBackMenuItem">
                        <i class="layui-icon layui-icon-down"></i> 置于底层
                    </div>
                </div>
            </div>

            <!-- 右侧属性面板 -->
            <div class="property-panel">
                <div class="panel-title">属性设置</div>
                <div class="panel-content" id="propertyPanel">
                    <!-- 属性设置表单将通过JS动态生成 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 打印设置弹窗 -->
    <div id="printSettingsModal" style="display: none; padding: 20px;">
        <form class="layui-form" id="printSettingsForm">
            <div class="layui-form-item">
                <label class="layui-form-label">纸张大小</label>
                <div class="layui-input-block">
                    <select name="paperSize" id="paperSize" lay-filter="paperSize">
                        <!-- 选项将通过JS动态生成 -->
                    </select>
                </div>
            </div>

            <div id="customSizeFields" style="display: none;">
                <div class="layui-form-item">
                    <label class="layui-form-label">宽度(mm)</label>
                    <div class="layui-input-block">
                        <input type="number" name="width" id="paperWidth" min="1" class="layui-input" placeholder="宽度">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">高度(mm)</label>
                    <div class="layui-input-block">
                        <input type="number" name="height" id="paperHeight" min="1" class="layui-input"
                            placeholder="高度">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">打印方向</label>
                <div class="layui-input-block">
                    <select name="orientation" id="orientation">
                        <option value="portrait">纵向</option>
                        <option value="landscape">横向</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">边距(mm)</label>
                <div class="layui-input-block">
                    <div class="layui-row">
                        <div class="layui-col-xs3">
                            <input type="number" name="marginTop" id="marginTop" min="0" class="layui-input"
                                placeholder="上">
                        </div>
                        <div class="layui-col-xs3">
                            <input type="number" name="marginRight" id="marginRight" min="0" class="layui-input"
                                placeholder="右">
                        </div>
                        <div class="layui-col-xs3">
                            <input type="number" name="marginBottom" id="marginBottom" min="0" class="layui-input"
                                placeholder="下">
                        </div>
                        <div class="layui-col-xs3">
                            <input type="number" name="marginLeft" id="marginLeft" min="0" class="layui-input"
                                placeholder="左">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- 变量选择器弹窗 -->
    <div id="variableSelectorModal" style="display: none; padding: 20px;">
        <div class="search-box">
            <input type="text" id="variableSearchKeyword" placeholder="搜索变量" class="layui-input">
        </div>
        <div class="variable-list" id="variableList">
            <!-- 变量列表将通过JS动态生成 -->
        </div>
    </div>

    <!-- 预览弹窗 -->
    <div id="previewModal" style="display: none; padding: 20px;">
        <div id="templatePreview">
            <!-- 预览内容将通过JS动态生成 -->
        </div>
    </div>

    <!-- 快捷键提示 -->
    <div class="shortcut-tips" id="shortcutTips" style="display: none;">
        <!-- 快捷键提示将通过JS动态生成 -->
    </div>

    <script src="../../assets/lib/layui/layui.js"></script>
    <script src="../../assets/lib/layui/custom.js"></script>
    <script type="text/javascript">
        layui.config({ base: '../../js/printTemplate/' }).use('printTemplateDesign');
    </script>
</body>

</html>